<template>
	<view>
		<dsl-navbar title="研习社" isBack bgTopImg="white"></dsl-navbar>
		<view class="rowsa bg-white padding">
			<view v-for="(item,index) in classifyList" :key="index" @click="num = index">
				<view :class="{'animation-scale-up':num == index}">
					<view>{{item.title}}</view>
					<view style="height: 6rpx;background-color:#00D88F ;opacity:0 "
						:style="num ==index?'opacity:1 ':'opacity:0' "></view>
				</view>
			</view>
		</view>
		<view class="bg-white">
			<view class="padding rowsb align-center">
				<view class="search_body rowsc align-center">
					<image src="/static/icon/icon_sysous.png" mode="widthFix" style="width: 30rpx;"
						class="margin-right-sm">
					</image>
					<input type="text" value="" placeholder="请输入关键词搜索" v-model="title" v-if="num==0">
					<input type="text" value="" placeholder="请输入关键词搜索" v-model="keyValue" v-if="num==1">

				</view>
				<view class="seach_submit">搜索</view>
			</view>
		</view>
		<view class="padding" v-if="title==''&&num==0">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index ) in carouselList" 
				@click="$tools.push('/pages/workbench/modules/articleText?id='+item.id)">
					<image :src="item.big_title_image" mode="aspectFill" class="swiper_image animation-scale-up">
					</image>
				</swiper-item>
			</swiper>
		</view>

		<view v-if="num==0" class="bg-white">
			<view class="consult_body solid-bottom" v-for="(item,inedx) in articleList" :key="item.id"
				@click="$tools.push('/pages/workbench/modules/articleText?id='+item.id)">
				<view style="width: 440rpx;" class="lineshow3">{{item.title}}</view>
				<view>
					<image :src="item.title_image" mode="aspectFill" class="consult_image animation-scale-up"></image>
				</view>
			</view>
		</view>
		<!-- 视频 -->
		<view class="flex flex-wrap rowsb padding-sm" v-if="num ==1">
			<view class="video margin-bottom " v-for="(item,index) in videoList" :key="item.id"
				@click="videoSetMen(item.video)">
				<image :src="item.image" mode="aspectFill" style="width: 100%;height: 100%;"></image>
				<view class="play_video">
					<image src="/static/icon/bofang.png" mode="" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
		</view>
		<view class="warp rowsc align-center" v-if="isVideoPlay">
			<view class="video-body ">
				<view class="rowsc">
					<video :src="videoValue" controls :autoplay='true'></video>
				</view>
				<view class="rowsc">
					<view class="video-close" @click="videoSetMen('')">
						关闭
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getvideo,
		getarticle,
		articleWorkbench
	} from '@/common/path.js'
	export default {
		data() {
			return {
				num: 0, //默认选中的分类
				classifyList: [{
						'title': '文章',
						'id': 1
					},
					{
						'title': '视频',
						'id': 2
					}
				],
				videoList: [], //视频
				pageData: 1,
				isVideoPlay: false,
				keyValue: '', //搜索内容
				videoList2: [],


				articleList: [], //列表
				carouselList: [], //轮播
				title: ''
			}
		},
		onLoad() {
			this.getvideo()
			this.getarticle()
		},
		watch: {
			title() { //搜索文章
				this.getarticle()
			},
			keyValue(i) { //搜索视频
				this.inputValue(i)
			}
		},
		methods: {
			//文章
			getarticle() {
				//工作台研习社
				let datas = {
					status: 1
				}
				this.Http.POST(articleWorkbench, datas)
					.then((res) => {
						console.log('[工作台研习社]', res);
						if (res.code == 1) {
							this.carouselList = res.data.carousel
						}
					})
				let data = {
					status: 1,
					page: 1,
					listrows: 2099,
					title: this.title
				}

				this.Http.POST(getarticle, data)
					.then((res) => {
						if (res.code == 1) {
							this.articleList = res.data
							if (res.data[0]) {
								this.title_image = res.data[0].title_image
							}
						} else {
							this.articleList = []
						}
					})
			},
			inputValue(e) {

				let event = e
				let arrayList = this.videoList //赋值数组
				let search = event //复制搜索内容
				// 数组过滤为对象数组
				arrayList = this.videoList.filter(function(product) {
					return Object.keys(product).some(function(key) {
						return String(product[key]).toLowerCase().indexOf(search) > -1;
					});
				});
				if (event.length == 0) { //如果输入的内容是空的话
					// this.getIndexCate()
					this.videoList = this.videoList2
					this.$forceUpdate()
					arrayList = this.videoList
				} else {
					let list = []
					arrayList.forEach(item => {
						list.push(item)
						console.log('[搜索到的内容2]', item);
					})
					this.videoList = list
				}
				console.log('[picker2]', this.videoList.length);
				this.videoList = arrayList

			},
			//视频列表
			getvideo() {
				let data = {
					status: 1,
					page: this.pageData,
					listrows: 100
				}
				this.Http.POST(getvideo, data)
					.then((res) => {
						// console.log('[视频列表]', res);
						if (res.code == 1) {
							if (this.pageData == 1) {
								this.videoList = res.data
								this.videoList2 = res.data

							} else {
								this.videoList.push(...res.data)
								this.videoList2.push(...res.data)

							}
						} else {
							if (this.pageData == 1) {
								this.videoList = []
								this.videoList2 = []
							} else {
								this.$tools.showToast('暂无更多内容')
							}
						}
					})
			},

			//关闭弹窗
			videoSetMen(item) {
				this.isVideoPlay = !this.isVideoPlay
				this.videoValue = item
			},
			onReachBottom(e) {
				this.pageData++
				this.getvideo()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F6FA;
	}

	.user_image {
		width: 80rpx;
		height: 80rpx;
		background: #eeeeee;
		border-radius: 50%;
		opacity: 1;
	}

	.user_sex {
		width: 24rpx;
		height: 24rpx;
	}

	.user_age {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		opacity: 1;
	}

	.user_education {
		width: 72rpx;
		height: 30rpx;
		border: 1rpx solid #2B9AFF;
		opacity: 1;
		border-radius: 20rpx;
		text-align: center;
		color: #2B9AFF;
		font-size: 20rpx;
		line-height: 30rpx;
	}

	.user_submit {
		width: 140rpx;
		height: 50rpx;
		background: #00D88F;
		opacity: 1;
		border-radius: 25rpx;
		line-height: 50rpx;
		text-align: center;
		color: white;
		font-size: 24rpx;
	}

	.search_body {
		width: 540rpx;
		height: 60rpx;
		background: #F5F6F7;
		opacity: 1;
		border-radius: 30rpx;
	}

	.seach_submit {
		width: 120rpx;
		height: 60rpx;
		background: #8B8787;
		opacity: 1;
		line-height: 60rpx;
		border-radius: 99rpx;
		color: white;
		text-align: center;
	}

	// 视频
	.video {
		width: 337rpx;
		height: 189rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx rgba(51, 51, 51, 0.1);
		border-radius: 16rpx;
		overflow: hidden;
		// overflow: hidden;
		position: relative;

		.play_video {
			height: 60rpx;
			width: 60rpx;
			position: absolute;
			top: 60rpx;
			margin: 0 auto;
			left: 0;
			right: 0;
		}

		.video_title {
			width: 306rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			opacity: 1;
		}
	}

	page {
		background-color: white;
	}

	.video-body {
		video {
			border-radius: 20rpx;
			height: 1000rpx;
			width: 700rpx;
		}

		.video-close {
			border: 1rpx solid white;
			color: white;
			padding: 10rpx 35rpx;
			border-radius: 30rpx;
			margin-top: 30rpx;
		}
	}

	.swiper_image {
		width: 690rpx;
		height: 300rpx;
		background: #07D6C6;
		opacity: 1;
		border-radius: 20rpx;
		width: 100%;
	}

	.search_body {
		width: 540rpx;
		height: 60rpx;
		background: #F5F6F7;
		opacity: 1;
		border-radius: 30rpx;
	}

	.seach_submit {
		width: 120rpx;
		height: 60rpx;
		background: #8B8787;
		opacity: 1;
		line-height: 60rpx;
		border-radius: 99rpx;
		color: white;
		text-align: center;
	}

	.workbench_image {
		width: 690rpx;
		height: 260rpx;
		background: #09DECF;
		opacity: 1;
		border-radius: 10px;
	}

	.consult_body {
		display: flex;
		padding: 30rpx;
		justify-content: space-between;

	}

	.consult_image {
		width: 230rpx;
		height: 160rpx;
		background: #D5E4EA;
		opacity: 1;
		border-radius: 10rpx;
	}
</style>
